@import url(./index.less);
@import url(../../../styles/common.less);

@annimation_time: 0.3s;
@animation_function: ease-out;

.job_menu{
    background: var(--bgMain);
    z-index: 1;
    height: 100vh;
    right: calc(-25rem - 3px) ;
    width: 25rem;
    // transform: translateX(25rem);
    position: fixed;
    border-left: 3px solid var(--dividerColor);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    animation-name: menuAnimation_pc_close;
    animation-duration: @annimation_time;
    animation-timing-function: @animation_function;
}

.open_menu{
    transform: translateX(-25rem);
    animation-name: menuAnimation_pc_open;
    animation-duration: @annimation_time;
    animation-timing-function: @animation_function;
    
}

@keyframes menuAnimation_pc_open {
    0% {
        transform: translateX(0);
    }

    100%{
        transform: translateX(-25rem);
    }
}

@keyframes menuAnimation_pc_close {
    0% {
        transform: translateX(-25rem);
    }

    100%{
        transform: translateX(0);
    }
}




.content{
    margin-top: 5rem;
    .name{
        border-bottom: 1px solid var(--dividerColor);
        padding-bottom: 0.5rem;
        span{
            font-size: 1rem;
            padding: 1rem 0.5rem 1rem 1rem;
            color: var(--textTitleColor);
        }
    }
    .theme_arr{
        align-items: center;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 1rem;
        .theme_item{
            height: 3rem;
            width: 3rem;
            margin-left: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            border-radius: 8px;
        }
        .active{
            width: 5rem;
            height: 5rem;
        }
    }
}
.content_active{
    // animation-name: menuContentAnimation;
    // animation-duration: 2s;
    // animation-timing-function: ease-out;
}

.close_icon{
    cursor: pointer;
    font-size: 1.5rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    color: var(--iconColor);
    transition: transform 0.3s;
}

.close_icon:hover{
    transform: rotate(180deg);
}
.theme_icon{
    font-size: 1rem;
    // color: #fff;
    color: var(--iconColor);
    // cursor: pointer;
    // padding-right: 1rem;
  }

  @media screen and (max-width: @mobile_screen) {
    @keyframes menuAnimation_mobile_open {
        0% {
            transform: translateX(0);
        }
        100%{
            transform: translateX(-100vw);
        }
    }
    @keyframes menuAnimation_mobile_close {
        0% {
            transform: translateX(-100vw);
        }
        100%{
            transform: translateX(0);
        }
    }
    .job_menu{
        width: 100vw;
        right: calc(-100vw - 3px);
        transform: translateX(0);
        animation-name: menuAnimation_mobile_close;
        animation-duration: @annimation_time;
        animation-timing-function:@animation_function;
    } 
    .open_menu{
        width: 100vw;
        transform: translateX(-100vw);
        animation-name: menuAnimation_mobile_open;
        animation-duration: @annimation_time;
        animation-timing-function:@animation_function;
    }
  }